import React from 'react';
import { Tooltip, Table, Divider, Button, Modal, Popconfirm, Card } from 'antd';
import { FormOutlined, PlusOutlined, PlusSquareOutlined, DeleteOutlined, SyncOutlined } from '@ant-design/icons';
import { connect } from "umi";
import CateEdit from './cateedit'

class ViewForm extends React.Component<any,any> {
    constructor(props: any) {
        super(props)
        this.state = {
            loading: false,
            visible: false,
            dataSource: [],
            cateid: 0,
            parentCate: {},
            ids: []
        }
    }
    componentDidMount() {
        this.fetchData();
    }
    fetchData = () => {
        this.setState({ loading: true });
        this.props.dispatch({
            type: 'Abp/getTreeList',
            payload: { layout: this.props.layout },
            control:'Category'
        }).then(() => {
            this.setState({ loading: false, dataSource: this.props.response.result });
        })
    }
    showModal = (val: any) => {
        this.setState({
            visible: val,
        });
    };
    editCate(cid: any) {
        var _this = this;
        this.setState({
            cateid: cid,
            parentCate: {},
        }, function () {
            _this.showModal(true);
        });
    }
    addSubCate(pid: any) {
        var _this = this;
        this.setState({
            cateid: 0,
            parentCate: pid,
        }, function () {
            _this.showModal(true);
        });
    }
    addCate(pid: any) {
        var _this = this;
        this.setState({
            cateid: 0,
            parentCate: {},
        }, function () {
            _this.showModal(true);
        });
    }
    handleDelete(val: any) {
        this.setState({ loading: true });
        this.props.dispatch({
            type: 'Abp/delete',
            payload: { id: val },
            control: 'Category',
        }).then(() => {
            this.setState({
                loading: false,                
            });
            this.fetchData();
        })
    }
    render() {
        const columns = [
            {
                title: '信息分类',
                dataIndex: 'categoryName',
                key: 'categoryName',
            },
            {
                title: '索引',
                dataIndex: 'categoryIndex',
                key: 'categoryIndex',
            },
            {
                title: '操作',
                key: 'action',
                render: (text: any, record: any) => this.state.dataSource.length >= 1 ? (
                    <span>
                        <Tooltip placement="left" title='编辑'><a onClick={() => this.editCate(record.id)}><FormOutlined /></a></Tooltip>
                        <Divider type="vertical" />
                        <Tooltip placement="bottom" title='添加子类'><a onClick={() => this.addSubCate(record)}><PlusSquareOutlined /></a></Tooltip>
                        <Divider type="vertical" />
                        <Popconfirm title="确定删除?" onConfirm={() => this.handleDelete(record.id)}>
                            <Tooltip
                                placement="bottom"
                                title='删除类别'>
                                <a>
                                    <DeleteOutlined style={{ color: 'red' }} /></a>
                            </Tooltip>
                        </Popconfirm>
                    </span>
                ) : null,
            },
        ];
        const rowSelection = {
            onChange: (selectedRowKeys: any, selectedRows: any) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            getCheckboxProps: (record: any) => ({
                name: record.name,
            }),
        };
        return (
            <div>
                <Card
                    size={this.props.size}
                    extra={
                        <span>
                            <Tooltip title='新增'><Button type="link" onClick={() => this.addCate(0)} icon={<PlusOutlined />}>新增</Button></Tooltip>
                            <Tooltip title='刷新'><Button type="link" onClick={() => this.fetchData()} icon={<SyncOutlined />}>刷新</Button></Tooltip>
                        </span>
                    }
                >

                    <Table
                        rowKey={(record) => record.id}
                        showHeader={false}
                        columns={columns}
                        dataSource={this.state.dataSource}
                        loading={this.state.loading}
                        pagination={false}
                        size={this.props.size}
                        rowSelection={rowSelection}
                    />

                    <Modal
                        title="分类编辑"
                        visible={this.state.visible}
                        onCancel={() => this.showModal(false)}
                        footer={null}
                        destroyOnClose                        
                    >
                        <CateEdit 
                            RefreshData={() => this.fetchData()} 
                            cateid={this.state.cateid} 
                            parentCate={this.state.parentCate}
                            layout={this.props.layout} />
                    </Modal>
                </Card>
            </div>
        );
    }
}
export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
}))(ViewForm);
